<template>
  <div class="chat-container">
    <div class="chat-header">
      sql小助手
    </div>
    <div class="chat-history" ref="chatHistory">
      <ul>
        <li v-for="(msg, index) in messages" :key="index" :class="{'text-left': msg.side === 'left', 'text-right': msg.side === 'right'}">
          <span>{{ msg.text }}</span>
        </li>
      </ul>
    </div>
    <div class="chat-input">
      <textarea rows="1" type="text" placeholder="输入消息..." v-model="sendMessage" @keyup.enter="send"></textarea>
      <button @click="send">发送</button>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, inject, nextTick } from 'vue';

const sendMessage = ref('');
const $post = inject('$post');
const chatHistory = ref(null);
const messages = ref([
  { text: '您好,我是sql小助手,在你编辑sql语句时,有疑问可以随时说明', side: 'left' },
]);

const send = async () => {
  if (sendMessage.value.trim() === '') {
    return;
  }
  const params = new URLSearchParams();
  params.append('userInput', sendMessage.value);
  messages.value.push({ text: sendMessage.value, side: 'right' });
  sendMessage.value = ''; // 清空输入框
  await nextTick();
  scrollToBottom();
  $post("/sql-helper/process", params).then(async (res) => {
    messages.value.push({ text: res, side: 'left' });
    await nextTick();
    scrollToBottom();
  });
};

const scrollToBottom = () => {
  chatHistory.value.scrollTop = chatHistory.value.scrollHeight;
};

onMounted(scrollToBottom);

</script>

<style scoped>
.chat-container {
  height: 622px;
  border: 1px solid #eaeaea;
  display: flex;
  flex-direction: column;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}
.chat-header {
  background-color: #587cf7;
  color: white;
  padding: 15px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid #eaeaea;
}
.chat-history {
  flex: 1;
  padding: 15px;
  overflow-y: auto;
}
.chat-input {
  display: flex;
  padding: 10px;
  border-top: 1px solid #eaeaea;
  background-color: white;
}
.chat-input textarea {
  flex: 1;
  padding: 10px;
  border: 1px solid #eaeaea;
  border-radius: 18px;
  margin-right: 10px;
  font-size: 14px;
}
.chat-input button {
  padding: 10px 20px;
  background-color: #587cf7;
  color: white;
  border: none;
  border-radius: 18px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
}
.chat-history ul {
  padding: 20px 30px;
  list-style: none;
}
.chat-history li {
  padding: 5px;
  margin-bottom: 10px;
  position: relative;
}
.chat-history li span {
  display: inline-block;
  border-radius: 7px;
  background-color: #a6e860;
  padding: 6px 10px 8px 10px;
}
.chat-history li.text-left span {
  background-color: white;
}
.chat-history li.text-left:before {
  content: '';
  width: 22px;
  height: 22px;
  border-radius: 3px;
  display: block;
  background: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.kJoTES8bcaoyfovuvwmzmwHaHa?w=199&h=198&c=7&r=0&o=5&dpr=1.1&pid=1.7) no-repeat center center;
  background-size: 100%;
  position: absolute;
  left: -25px;
  top: 5px;
}
.text-right {
  text-align: right;
}
.chat-history li.text-right:after {
  content: '';
  width: 22px;
  height: 22px;
  border-radius: 3px;
  display: block;
  background: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.kJoTES8bcaoyfovuvwmzmwHaHa?w=199&h=198&c=7&r=0&o=5&dpr=1.1&pid=1.7) no-repeat center center;
  background-size: 100%;
  position: absolute;
  right: -23px;
  top: 5px;
}
</style>
